<template>
    <swiper :options="swiperServe">
        <swiper-slide class="swiper-slide swiper-serve" v-for="(item,index) in data" :key="index">
          <router-link :to="`/detail/${item.gameid}`" class="f-link f-tac">
            <p class='serve-top f-fs14 f-mp0'>{{item.timename}}</p>
            <!--<p :class="['serve-line serve-act-line']"></p>-->
            <p class="f-pr"><i class="f-pa ser-tag f-ib">{{item.min_rate|zero}}折</i><img :src="item.image" class="serve-img bg" /></p>
            <p class="f-mp0 f-fs14 f-thd f-ib f-w100">{{item.gamename}}</p>
            <p class="f-cff5 f-mp0 f-thd f-ib f-w100">{{item.sername}}</p>
          </router-link>
        </swiper-slide>
    </swiper>
</template>

<script>
export default {
    name: 'servelist',
    props:['data'],
    data () {
        return {
            swiperServe: {
                autoplay: {
                    disableOnInteraction: false,
                },
                spaceBetween:20,/**/
                slidesPerView : 3
            },
        }
    },

    methods: {},

    created (){}
}
</script>

<style lang="less" scoped>
    .f-cff5{color:#FF5102}
    .serve-top{
        margin-bottom: 0;
    }
    .serve-act{
      background-color: #FFC800;
      border-radius: 10px;
    }
    
    .serve-line{
      border-bottom: 1px dotted #FFC800;
    }
    .serve-act-line,.serve-acted{
      border-color:#FFC800;
    }
    .ser-tag{
        background-color:#ffa72b;
        color:#fff;
        top:8px;
        left:15px;
        padding:2px 5px; 
        border-radius: 8px;
    }
    .serve-img{
      width:200px;
      height: 200px;
      border-radius: 20px;
    }
</style>
